<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>常用的键盘事件</title>
    <style>
    </style>
</head>

<body>
    <div id="root">
        <input type="text"  id="search" placeholder="请输入搜索内容">
    </div>
</body>
<script>
    /* 
    onkeyup 按键松开
    onkeydown 按键按下
    onkeypress 按键按下(不能识别功能键)
    */
    // document.onkeyup=function (e){
    //     console.log(e)
    // }
    // document.onkeydown=function (e){
    //     console.log(e)
    // }
    document.querySelector('#search').addEventListener('keyup',(e)=>{
       let key= e.key
       console.log(e)
       if(key==='Enter'){
        console.log('你好'+e.target.value)
       }
    })
    /* 
    键盘事件对象
        e.key/keyCode判断是哪个键 
    */
    document.onkeyup=function (e){
       let key= e.key
       if(key==='s'){
        document.querySelector('input').focus()
       }
    }
</script>

</html>